<template>
  <div>
    <ZanTab :list="list" :selectedId="selectedId" :componentId="'tab1'" @change="handleZanTabChange" height="45" :scroll="true"/>
    <ZanLoadmore :loading="loading"/>
    <div class="lix-sl__list">
      <div class="lix-sl__list--item" v-for="(item, index) in shopList.items" :key="index" @click="onClick" :data-id="item.id">
        <image :src="item.picture"/>
        <div class="lix-sl__item">
          <p class="lix-sl__item--title zan-ellipsis">{{ item.name }}</p>
          <p class="lix-sl__item--desc zan-ellipsis--l2">{{ item.description }}</p>
          <p class="lix-sl__item--o-price-u"><span class="lix-sl__item--f-price-u">￥</span><span class="lix-sl__item--f-price">{{ item.price }}</span></p>
        </div>
      </div>
    </div>
    <ZanLoadmore :nomore="noMore" :nodata="noData"/>
  </div>
</template>

<script>
import ZanTab from '../../node_modules/mpvue-zanui/src/components/zan/tab';
import ZanLoadmore from '../../node_modules/mpvue-zanui/src/components/zan/loadmore';
import { SHOPLIST_GET_DATA } from '../store/mutation-types';
import { mapGetters, mapActions } from 'vuex';
import { getShopCatagoryTab } from '../api';
export default {
  components: {
    ZanTab,
    ZanLoadmore
  },
  data() {
    return {
      list: [],
      selectedId: null,
      catIdx: null,
      wrapIdx: null,
      itemIdx: null
    };
  },
  watch: {
    selectedId() {
      if (!this.selectedId) {
        return;
      }
      this.getShopList({
        id: this.selectedId,
        page: 1
      });
    }
  },
  computed: {
    ...mapGetters('category', {
      categoryData: 'data'
    }),
    ...mapGetters('shoplist', {
      shopList: 'data',
      noMore: 'nomore',
      noData: 'nodata',
      loading: 'loading'
    })
  },
  onLoad(option) {
    this.list = [];
    if (option.id) {
      // 传入id 生成tab
      getShopCatagoryTab(option.id)
        .then(res => {
          console.log(res);
          const items = res.data.items;
          items.forEach(item => {
            const obj = {
              id: item.id,
              title: item.name
            };
            this.list.push(obj);
          });
          this.selectedId = this.list[0].id;
        })
        .catch(e => {
          console.log(e);
        });
    } else {
      this.catIdx = option['cat-idx'];
      this.wrapIdx = option['wrap-idx'];
      this.itemIdx = option['item-idx'];
      console.log('catIdx: ', this.catIdx);
      console.log('wrapIdx: ', this.wrapIdx);
      console.log('itemIdx: ', this.itemIdx);

      console.log(this.categoryData);
      if (this.catIdx !== null && this.wrapIdx !== null && this.itemIdx !== null) {
        console.log(this.selectedId);
        const wrapItems = this.categoryData[this.catIdx].children[this.wrapIdx].children;
        this.selectedId = wrapItems[this.itemIdx].id;
        this.list = [];
        for (let i = 0; i < wrapItems.length; i++) {
          const item = {
            'title': wrapItems[i].name,
            'id': wrapItems[i].id
          };
          this.list.push(item);
        }
        console.log(this.list);
      }
    }

    console.log(this.selectedId);

    // this.getShopList({id: this.selectedId, page: 1});
  },
  methods: {
    ...mapActions('shoplist', {
      'getShopList': SHOPLIST_GET_DATA
    }),
    ...ZanTab.methods,
    handleZanTabChange(e) {
      console.log(e);
      this.selectedId = e.selectedId;
    },
    onClick(e) {
      console.log('Click');
      const goodsid = e.mp.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/product?id=' + goodsid
      });
    }
  }
};
</script>

<style lang="scss">
@import "../theme-chalk/shoplist.scss";
</style>